<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="./index.js"></script>
    <title>test</title>
    <style type="text/css">
      .sec {
        margin-top: 10px;
        height: 120px;
        width: 120px;
        background-color: skyblue;
        /* border-radius: 20px 0px 120px 30px; */
        mask-image: paint(smooth-corner);
        -webkit-mask-image: paint(smooth-corner);
        -moz-mask-image: paint(smooth-corner);
        --corner-radius: 100%;
      }
      .sec2 {
        margin-top: 10px;
        height: 120px;
        width: 120px;
        background-color: skyblue;
        mask-image: paint(smooth-corner);
        -webkit-mask-image: paint(smooth-corner);
        -moz-mask-image: paint(smooth-corner);
        --corner-radius: 10px 20px 30px 40px;
        --smooth-corner: 0.6;
      }
      .sec3 {
        margin-top: 10px;
        height: 120px;
        width: 120px;
        background-color: skyblue;
        mask-image: paint(smooth-corner);
        -webkit-mask-image: paint(smooth-corner);
        -moz-mask-image: paint(smooth-corner);
        --corner-radius: 20px 40px;
        /* --smooth-corner: 2.5; */
      }
      .sec4 {
        margin-top: 10px;
        height: 120px;
        width: 120px;
        background-color: skyblue;
        mask-image: paint(smooth-corner);
        -webkit-mask-image: paint(smooth-corner);
        -moz-mask-image: paint(smooth-corner);
        /* --smooth-corner: 2.5; */
        --corner-radius: 10px 20px 40px;
      }
      .sec5 {
        margin-top: 10px;
        height: 120px;
        width: 120px;
        background-color: skyblue;
        mask-image: paint(smooth-corner);
        -webkit-mask-image: paint(smooth-corner);
        -moz-mask-image: paint(smooth-corner);
        /* --smooth-corner: 2.5; */
        --corner-radius: 10px 20px 30px 40px;
      }
      .sec6 {
        margin-top: 10px;
        height: 120px;
        width: 120px;
        background-color: skyblue;
        mask-image: paint(smooth-corner);
        -webkit-mask-image: paint(smooth-corner);
        -moz-mask-image: paint(smooth-corner);
        /* --smooth-corner: 2.5; */
        --corner-radius: 10px 20px 30px 40px 5px 10px 35px 10px;
      }
      .sec10 {
        margin-top: 10px;
        height: 30px;
        width: 100px;
        background-color: skyblue;
        mask-image: paint(smooth-corner);
        -webkit-mask-image: paint(smooth-corner);
        -moz-mask-image: paint(smooth-corner);
        --smooth-corner: 2.2;
        --corner-radius: 100%;
      }
    </style>
  </head>
  <body>
    <div class="sec" style="--smooth-corner: 1.5;"></div>
    <div class="sec" style="--smooth-corner: 1.3;"></div>
    <div class="sec" style="--smooth-corner: 1.2;"></div>
    <div class="sec" style="--smooth-corner: 1.1;"></div>
    <div class="sec" style="--smooth-corner: 0.9;"></div>
    <div class="sec" style="--smooth-corner: 0.8;"></div>
    <div class="sec" style="--smooth-corner: 0.7;"></div>
    <div class="sec2"></div>
    <div class="sec3"></div>
    <div class="sec4"></div>
    <div class="sec5"></div>
    <div class="sec6"></div>
    <div class="sec10"></div>
    <div class="sec10"></div>
  </body>
</html>
